<template>
    <div class="asideNav">
        <!-- <div class="nav-a"> -->
            <ul class="nav-b">
                <li class="nav-c" v-for="item in seriesList" :key="item.id">
                    <span>{{item.name}}</span>
                    <span>></span>
                    <!-- <div class="nav-c"> -->
                        <ul class="nav-d">
                            <li v-for="it in item.children" :key="it.id" @click="goProOne(it.id)">
                                <img src="../秒杀.png" alt="">
                                <span>{{it.name}}</span>
                            </li>
                        </ul>
                    <!-- </div> -->
                </li>
                <li class="nav-c" v-for="item in directGoods" :key="item.id">
                    <span>{{item.name}}</span>
                    <span>></span>
                    <!-- <div class="nav-c"> -->
                        <ul class="nav-d">
                            <li v-for="it in item.s_goods" :key="it.id" @click="goDetail(it.id)">
                                <img src="../秒杀.png" alt="">
                                <span>{{it.name}}</span>
                            </li>
                        </ul>
                    <!-- </div> -->

                </li>
            </ul>
        <!-- </div> -->
    </div>
</template>

<script>

export default {
    name: 'asidenav',
    data() {
        return {

        };
    },
    props: ['seriesList', 'directGoods'],
    methods: {
        // 跳去详情页
        goDetail(id) {
            localStorage.removeItem('goodId')
            this.$router.push({
                name: "detail",
                params: {
                    id,
                }
            })
        },
        // 跳转到产品页
        goProOne(id) {
            this.$router.push({
                name: "proOne",
                params: {
                    id,
                }
            })
        },
    }
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.asideNav {
    // width: vw(160);
    height: vw(400);
    padding: vw(20) vw(15) vw(20) vw(20);
    background-color: rgb(197, 187, 187);
    position: absolute;
    top: vw(180);
    left: vw(50);
    z-index: 99;

        .nav-b {
            width: vw(180);
            height: 100%;   
            position: relative;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .nav-c {
                font-size: vw(16);
                display: flex;
                justify-content: space-between;

                span {
                    color: rgb(110, 107, 107);
                    margin: 0 vw(10);
                }

                &:hover span:nth-child(1) {
                    color: #000;
                }

                &:hover span:nth-child(2) {
                    color: rgb(240, 90, 71);
                }

                    .nav-d {
                        // width: vw(450);
                        height: vw(400);
                        background-color: #fff;
                        position: absolute;
                        top: 0;
                        left: vw(180);
                        // display: none;
                        display: flex;
                        flex-wrap: wrap;

                        li {
                            width: vw(220);
                            height: vw(50);
                            font-size: vw(18);
                            color: rgb(110, 107, 107);
                            margin: vw(10) 0;
                            // display: flex;
                            // flex-wrap: wrap;
                            // flex-direction: column;
                            // justify-content: flex-start;

                            img {
                                width: vw(50);
                                height: vw(50);
                            }

                            span {
                                width: vw(160);
                                font-size: vw(14);
                                line-height: vw(50);
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }
                        }

                    }
                    &:hover .nav-d>li{
                        display: block;
                    }
                    &:hover .nav-d{
                        display: block;
                    }

                // }


            }
        //     .nav-bb:hover .nav-c {
        //     display: block;
        // }
        }

       
    // }
}
</style>
